<template>
  <div ref="nodeChartTab" class="vue-tabs-chrome">
    <div ref="content" class="tabs-content">
      <template v-if="tabs.length > 0">
        <!-- tab -->
        <div
          v-for="(tab, index) in tabs"
          :key="tab.id + 'key'"
          ref="item"
          class="tabs-item"
          :class="
            [{ active: tab.id === value }, `tab-${tab.id}`, tab.class].filter(
              (item) => item
            )
          "
          :style="{
            width: tabWidth + 'px',
            left: (tabWidth - gap * 2) * index + 'px',
          }"
          @click="handleClickTab(tab)"
        >
          <!-- 背景样式 -->
          <div class="tabs-background">
            <!-- 样式 -->
            <div class="tabs-background-content"></div>
            <svg
              class="tabs-background-before"
              :style="{ width: '7px', height: '7px' }"
            >
              <path d="M 0 7 A 7 7 0 0 0 7 0 L 7 7 Z"></path>
            </svg>
            <svg
              class="tabs-background-after"
              :style="{ width: '7px', height: '7px' }"
            >
              <path d="M 0 0 A 7 7 0 0 0 7 7 L 0 7 Z"></path>
            </svg>
          </div>
          <!-- tab label  -->
          <div class="tabs-main">
            <!-- 正常显示状态 -->
            <div class="tabs-label">
              <a-tooltip placement="top" :mouse-enter-delay="1">
                <template slot="title">
                  <span>{{ tab.name }}</span>
                </template>
                <span class="tabs-label-text">{{ tab.name }}</span>
              </a-tooltip>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script lang="ts">
/**
 * Tab component  删减版 无拖动(able to edit tab name)
 * 经济态势算子详情图表 tab
 * @author Jinhui Hou
 */

import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import { Tab } from '@/store/modules/graphanalysis'
import elementResizeDetectorMaker from 'element-resize-detector'

@Component({
  components: {},
  filters: {},
  directives: {
    focus: {
      inserted: (element: any) => {
        element.focus()
      },
    },
  },
})
export default class NodeTabs extends Vue {
  @Prop({ type: [String, Number], default: '' }) private value!: string | number // 当前 激活 tab pipelineId
  @Prop({ type: Array, default: () => [] }) private tabs!: Array<Tab> // 所有 tabs
  @Prop({ type: Number, default: 70 }) private minWidth!: number // tab 最小宽度
  @Prop({ type: Number, default: 220 }) private maxWidth!: number // tab 最大宽度
  @Prop({ type: Number, default: 7 }) private gap!: number // 暂时未知
  @Prop({ type: Boolean, default: false }) private insertToAfter!: boolean // 添加 tab 到当前 激活tab 后,
  @Prop({ type: Boolean, default: true }) private allowedEdit!: boolean // 可编辑
  @Prop({ type: Number, default: 0 }) private projectId!: number // 当前项目Id

  private tabWidth: number = 0 // tab 宽度 需要实时计算
  private timer: any = null // 定时器

  /**
   * Vue 生命周期  mounted
   */
  private mounted() {
    this.calcTabWidth()
    const erdTable = elementResizeDetectorMaker()
    const nodeEditBox = this.$refs.nodeChartTab as HTMLElement
    erdTable.listenTo(nodeEditBox, () => {
      this.handleResize()
    })
    this.$once('hook:beforeDestroy', () => {
      erdTable.removeAllListeners(nodeEditBox)
    })
  }

  public get tabsLength() {
    return this.tabs.length
  }

  @Watch('tabsLength')
  private watchTabs() {
    this.doLayout()
  }

  /**
   * 计算 tab 的宽度
   */
  public calcTabWidth() {
    const { tabs, maxWidth, minWidth, gap } = this
    const $content = this.$refs.content as HTMLElement // 整个 tabs 容器
    if (!$content) {
      return Math.max(maxWidth, minWidth)
    } // 如果 tab 容器不存在， 返回一个最大值, 其实返回只是占位
    // tabs 容器的可用宽度 gap 是 圆角防止贴边的宽度 first tab 左侧， last tab 右侧 ， 最后 插槽右侧贴边  共3个
    const contentWidth = $content.clientWidth - gap * 3
    let width = contentWidth / tabs.length // 计算宽度, 根据 可用宽度和 tabs 长度
    width += gap * 2 // 加两边优化圆角
    // 宽度边界限制
    if (width > maxWidth) {
      width = maxWidth
    }
    if (width < minWidth) {
      width = minWidth
    }
    this.tabWidth = width
    return null
  }

  /**
   * 重新 layout 排布
   */
  public doLayout() {
    this.calcTabWidth()
  }

  /**
   * 点击切换 tab
   */
  public handleClickTab(tab: any) {
    this.$emit('change-tab', tab)
  }

  /**
   * 改变窗口宽度 相应
   */
  public handleResize() {
    if (this.timer) {
      clearTimeout(this.timer)
    }
    this.timer = setTimeout(() => {
      this.doLayout()
    }, 50)
  }
}
</script>

<style lang="less" scoped>
/* tab 整体 */
.vue-tabs-chrome {
  background-color: #eff0f7;
  bottom: 0;
  height: 100%;
  left: 0;
  max-height: 450px;
  min-width: 150px;
  padding-top: 4px;
  position: absolute;
  // 减去右侧的宽度
  width: calc(100% - 480px);

  /* tab 内容 */
  .tabs-content {
    height: 34px;
    overflow: hidden;
    position: relative;
  }

  /* tab */
  .tabs-item {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    height: 100%;
    position: absolute;
    transition: width 0ms;
    user-select: none;

    /* hover */
    &:hover {
      .tabs-background-content {
        background-color: #f2f3f5;
      }

      .tabs-background-before,
      .tabs-background-after {
        fill: #f2f3f5;
      }
    }

    /* 激活 */
    &.active {
      z-index: 2;

      .tabs-background {
        opacity: 1;
      }

      .tabs-background-content {
        background-color: #fff;
      }

      .tabs-background-before,
      .tabs-background-after {
        fill: #fff;
      }
    }
  }

  /* tab 标签 */
  .tabs-main {
    align-items: center;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    height: 100%;
    left: 0;
    margin: 0 14px;
    overflow: hidden;
    position: absolute;
    right: 0;
    transition: 150ms;
    width: calc(100% - 28px);
  }

  /* tabs-main 中的 label */
  .tabs-label {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex: 1;
    justify-content: center;
    margin-left: 0 6px;
    width: calc(100% - 23px);

    .tabs-label-text {
      display: inline-block;
      max-width: calc(100% - 20px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &.no-close {
      margin-right: 7px;
    }

    .tab-name-edit-icon {
      cursor: pointer;
      display: none;
      font-size: 16px;
      margin-left: 2px;
    }

    &:hover {
      .tab-name-edit-icon {
        display: inline-block;
      }
    }
  }

  /* background 背景样式 */
  .tabs-background {
    box-sizing: border-box;
    height: 100%;
    padding: 0 7px - 1px;
    position: absolute;
    transition: opacity 300ms;
    width: 100%;
  }

  .tabs-background-content {
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    height: 100%;
    transition: background 150ms;
  }

  .tabs-background-before,
  .tabs-background-after {
    bottom: -1px;
    fill: transparent;
    position: absolute;
    transition: background 150ms;
  }

  .tabs-background-before {
    left: -1px;
  }

  .tabs-background-after {
    right: -1px;
  }

  @keyframes tab-show {
    from {
      transform: scaleX(0);
    }

    to {
      transform: scaleX(1);
    }
  }
}
</style>
